<script setup lang="ts">
  import {getProductAPI} from "@/api/product";
  import {onBeforeRouteUpdate, useRoute} from "vue-router";
  const route = useRoute()
  import {ref, onMounted, onBeforeUnmount, watch} from "vue";
  import Xsku  from "@/views/Xsku/index.vue";
  import {fetchHotGoodsAPI} from '@/api/product';
  import useCartStore, {type Sku} from "@/stores/cart.ts";
  const cartStore = useCartStore()
  const productData = ref({})
  const picBox = ref(null);//图片盒子
  const kuai = ref(null);//滑块蒙版
  const flag = ref(false); //是否在图片内移动鼠标
  const bigPic = ref(null); //大图盒子
  const activePic = ref(null); //当前图片url
  const numProduct = ref(1); //商品数量
  const dayHot = ref([]) //24小时热销
  const weekHot = ref([]) //周热销
  const skuData:Sku= {
    inventory: 0,
    oldPrice: 0,
    picUrl: "",
    price: 0,
    selected:true,
    skuId: "",
    specsText: ""
  }  //sku
  //滑块移动
  const move = (e)=>{
      if(flag){
        let x = e.clientX - picBox.value.offsetLeft - 100
        x<0? x=0:x>200? x=200:x
        let y = e.clientY - picBox.value.offsetTop - 100
        y<0? y=0:y>200? y=200:y
        kuai.value.style.left = x + 'px'
        kuai.value.style.top = y + 'px'
        let bigX = x>0? (-2*x):0
        bigPic.value.style.backgroundPositionX = bigX+'px'
        let bigY = y>0? (-2*y):0
        bigPic.value.style.backgroundPositionY = bigY+'px'
      }
  }
  const getProduct = async (id=route.params.id)=>{
    const res = await getProductAPI(id)
    console.log(res)
    productData.value = res.result
    activePic.value = res.result.mainPictures[0]
    bigPic.value.style.backgroundImage = `url(${activePic.value})`
  }
  //切换图片
  const changPic = (item)=>{
    bigPic.value.style.backgroundImage = `url(${item})`
    activePic.value = item
  }
  //加入购物车
  const addCart = ()=>{
    if (skuData.skuId){
      // skuData.count = numProduct.value
      const sku = {...skuData}
      sku.count = numProduct.value
      sku.name = productData.value.name
      sku.selected = true
      cartStore.addCart(sku)
    }
   }
  const getHotGoods = async ()=>{
    const dayHotres = await fetchHotGoodsAPI({id:route.params.id,type:1,limit:3})
    dayHot.value = dayHotres.result
    const weekHotres = await fetchHotGoodsAPI({id:route.params.id,type:2,limit:3})
    weekHot.value = weekHotres.result
  }
  // //sku的选择发生改变
  const changeSku = (data:Sku)=>{
    if(data.skuId){
      Object.keys(data).forEach((key:string)=>{
        skuData[key] = data[key]
      })
    }
  }
  onMounted(async ()=>{
    await getProduct()
    getHotGoods()
  })
//   路由变化后数据更新
  onBeforeRouteUpdate((to)=>{
    getProduct(to.params.id)
  })
</script>

<template >
  <div class="product-container">
    <el-breadcrumb>
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: `/categroy/${productData?.categories?.[1].name}` }">{{ productData?.categories?.[1]?.name }}</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: `/category/sub/${productData.categories?.[0].name}` }">{{productData?.categories?.[0].name}}</el-breadcrumb-item>
      <el-breadcrumb-item >{{productData.name}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="jianjie">
  <!--     图片展示-->
      <div class="pic" ref="picBox" @mouseover="flag=true" @mouseout="flag=false" @mousemove="move">
        <img :src="activePic" alt="">
          <!--  蒙版      -->
        <div class="kuai" ref="kuai" ></div>
          <!--        放大镜-->
        <div class="bigPic" ref="bigPic"  v-show="flag"></div>
<!--  销量数据      -->
        <div class="sales">
          <ul>
            <li>
              <p>销售人气</p>
              <p>{{productData.salesCount}}</p>
              <a href="javajscript:;">销售人气</a>
            </li>
            <li>
              <p>商品评价</p>
              <p>{{productData.commentCount}}</p>
              <a href="javajscript:;">查看评价</a>
            </li>
            <li>
              <p>收藏人气</p>
              <p>{{productData.collectCount}}</p>
              <a href="javajscript:;">收藏商品</a>
            </li>
            <li>
              <p>品牌信息</p>
              <p>{{productData?.brand?.name}}</p>
              <a href="javajscript:;">品牌主页</a>
            </li>
          </ul>
        </div>
      </div>
    <!--      所有图片-->
      <div class="picList">
        <ul>
          <li v-for="item in productData.mainPictures" @click="changPic(item)" >
            <img :src="item" alt=""  :class="{active:activePic===item}">
          </li>
        </ul>
      </div>
    <!--   产品信息   -->
      <div class="introduce">
        <h3>{{productData.name}}</h3>
        <p class="desc">{{productData.desc}}</p>
        <p  class="price"> ￥{{productData.price}} <span>￥{{productData.oldPrice}}</span></p>
        <div class="service">
          <dl>
            <dt>促销</dt>
            <dd>12月好物放送，App领券购买直降120元</dd>
          </dl>
          <dl>
            <dt>服务</dt>
            <dd>
              <ul><li>无忧退货</li><li>快速退款</li><li>免费包邮</li></ul>
              <a href="">了解详情</a></dd>
          </dl>
        </div>
        <div class="guige">
            <Xsku :goods="productData" @change ="(data:Sku)=>changeSku(data)"/>
        </div>
        <div class="count">
          <el-input-number v-model="numProduct" :min="1" :max="10"  />
        </div>
        <div class="addCart">
          <el-button @click="addCart">加入购物车</el-button>
        </div>
      </div>
    </div>
    <!--  详情    -->
    <div class="boxDetails">
      <div class="details">
        <h1>商品详情</h1>
        <div class="property">
          <ul>
            <li v-for="item in productData?.details?.properties">
              <dl>
                <dt>{{item.name}}</dt>
                <dd>{{item.value}}</dd>
              </dl>
            </li>
          </ul>
        </div>
        <img :src="item" alt="" v-for="item in productData?.details?.pictures" class="detailsPic">
      </div>
      <div class="rankings">
        <h3>24小时热销榜</h3>
        <ul>
          <li v-for="item in dayHot">
            <el-card shadow="hover">
              <router-link :to="`/product/${item.id}`">
                <img :src="item.picture">
              </router-link>
              <p>{{ item.name }}</p>
              <span>￥{{ item.price }}</span>
            </el-card>
          </li>
        </ul>
        <h3>周热榜</h3>
        <ul>
          <li v-for="item in weekHot">
            <el-card shadow="hover">
              <router-link :to="`/product/${item.id}`">
                <img :src="item.picture">
              </router-link>
              <p>{{ item.name }}</p>
              <span>￥{{ item.price }}</span>
            </el-card>
          </li>
        </ul>
      </div>
    </div>
  </div>


</template>

<style scoped lang="less">
.el-breadcrumb{
  margin: 20px 0;
}
.product-container{
  width: 70vw;
  margin: 0 auto;
}
.jianjie{
  display: flex;
  justify-content: space-between;
  height: 550px;
  .pic{
    width: 400px;
    height: 400px;
    position: relative;
    img{
      width: 100%;
      height: 100%;
    }
    div{
      background: rgba(19, 19, 19, 0.25);
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 50%;
    }
    .bigPic{
      width: 400px;
      height: 400px;
      position: absolute;
      left: 420px;
      background-size: 800px 800px;
      z-index: 999;
    }
  }
  .pic .sales{
    width: 400px;
    height: 100px;
    position: absolute;
    top: 400px;
    background: white;
    ul{
      width: 400px;
      display: flex;
      li{
        text-align: center;
        margin: 10px;
        p{
          margin: 5px 0;
        }
        a{
          color: #3c3e3e;
        }
      }
      li+li{
        border-left: 1px solid #ccc;
        padding-left: 10px;
        box-sizing: border-box;
      }
    }
  }
  .picList{
    width: 70px;
    margin-left: 20px;
    ul{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 400px;
      img{
        width: 70px;
        height: 70px;
        cursor: pointer;
      }
      li :hover, .active{
        border: 2px solid #27C0C5;
        box-sizing: border-box;
      }
    }
  }
  .introduce{
    width:calc(70vw - 490px);
    padding-left: 40px;
    box-sizing: border-box;
    h3{
      font-size: 1.8em;
    }
    .desc{
      color: #666666;
      margin: 10px 0;
    }
    .price{
      font-size: 1.3em;
      color: red;
      span{
        color: #666666;
        font-size: 0.7em;
        text-decoration: line-through;
      }
    }
    .service{
      background: #F5F5F5;
      margin: 10px 0;
      padding: 20px 10px;
      box-sizing: border-box;
      dl{
        display: flex;
        dd{
          margin-left: 20px;
          display: flex;
          a{
            color: #27ba9b;
          }
          a:hover{
            text-decoration: none;
          }
        }
      }
      ul{
        display: flex;
        li{
          margin-right: 10px;
          height: 21px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        li:before{
          content: '';
          display: inline-block;
          width: 3px;
          height: 3px;
          background: #27ba9b;
          border-radius: 50%;
          line-height: 10px;
          margin-right: 5px;
        }
      }
    }
    .count{
      margin: 10px 0;
    }
    .addCart{
      margin: 10px 0;
    }
  }

}
.boxDetails{
  display: flex;
  justify-content: space-between;
}
.details{
  clear: both;
  display: inline-block;
  width: calc(70vw - 330px);
  h1{
    font-size: 1.5em;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    li{
      width: 50%;
    }
    dl{
      display: flex;
      margin-top: 10px;
    }
    dt{
      width: 100px;
      color: #acacac;
    }
    dd{
      color: #808080;
    }
  }
  img.detailsPic{
    width: 100%;
    margin-top: -5px;
  }
}
.rankings{
  width: 300px;
  display: inline-block;
  h3{
    background: #e26237;
    color: white;
    padding: 20px;
    box-sizing: border-box;
    font-size: 1.3em;
  }
  ul{
    display: flex;
    flex-direction: column;
    li{
      width: 100% ;
      img{
        width: 100%;
      }

    }
  }
}
</style>
